<template>
  <div class="indexContainer">
    <el-form :model="loginForm" :rules="rules" ref="loginForm" class="demo-loginForm">
      <el-form-item prop="name">
        <el-input class="inputStyle" placeholder="请输入用户名" v-model="loginForm.name"></el-input>
      </el-form-item>
      <el-form-item prop="password">
        <el-input class="inputStyle" placeholder="请输入密码" v-model="loginForm.password" type="password"></el-input>
      </el-form-item>
      <el-form-item prop="remember" style="text-align: left;">
        <el-checkbox type="primary" v-model="loginForm.remember">记住我</el-checkbox>
      </el-form-item>
      <el-form-item>
        <el-button :loading="isSubmit" type="primary" @click="submitForm('loginForm')">{{submitBtnText}}</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
  import Vue from 'vue'
  import {Form, FormItem, Input, Button, Checkbox} from 'element-ui'
  import service from '../utils/service'

  Vue.component(Form.name, Form)
  Vue.component(FormItem.name, FormItem)
  Vue.component(Input.name, Input)
  Vue.component(Button.name, Button)
  Vue.component(Checkbox.name, Checkbox)
  export default {
    name: 'App',
    data () {
      return {
        loginForm: {
          name: '',
          password: '',
          remember: false
        },
        rules: {
          name: [
            {required: true, message: '请输入用户名', trigger: 'blur'}
          ],
          password: [
            {required: true, message: '请输入密码', trigger: 'blur'}
          ]
        },
        isSubmit: false,
        submitBtnText: '登录'
      }
    },
    mounted () {
      this.handleLogout()
    },
    methods: {
      handleLogout () {
        this.$store.dispatch('clearToken')
        this.$store.dispatch('clearUserInfo')
      },
      /**
       * 处理登录事件
       * @param formName
       */
      submitForm (formName) {
        const _this = this
        const loginForm = this.loginForm
        this.isSubmit = true
        this.submitBtnText = '登录中...'
        this.$refs[formName].validate((valid) => {
          if (valid) {
            const name = loginForm.name
            const password = loginForm.password
            if (name === 'admin' && password === '123456') {
              _this.$store.dispatch('setUserInfo', {userName: name, userSign: password})
              _this.$store.dispatch('setToken', '0001')
              const currentMenu = _this.$store.getters.getCurrentMenu
              if (!currentMenu) {
                this.$store.dispatch('setCurrentMenu', '/index/message')
              }
              console.log(currentMenu)
              _this.$router.push(currentMenu || '/index/message')
            } else {
              service.showMessage('用户名或密码不正确', 'error')
            }
          } else {
            console.log('error')
          }
          this.isSubmit = false
          this.submitBtnText = '登录'
        })
      }
    }
  }
</script>

<style scoped>
  .indexContainer {
    width: 300px;
    padding-top: 100px;
    margin: auto;
  }

  .inputStyle {
    padding-left: 0;
  }

  .el-input__inner {
    padding-left: 30px;
  }

  .el-button {
    display: block;
    width: 100%;
  }
</style>
